<%--
  Created by IntelliJ IDEA.
  User: 86178
  Date: 2020/7/21
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: 86178
  Date: 2020/7/20
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <!-- script标签 不能省后半部分 -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>

</head>
<body>
<!--弹出新增的表单-->
<div class="site-text" style="margin-top: 10px ; display: none" id="insertUserForm" >
    <form class="layui-form" lay-filter="returnForm" id="insertForm">
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <input type="text" name="id" required  lay-verify="text" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="text" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block" >
                <input type="text" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="real_name" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="无效">
                <input type="radio" name="status" value="1" title="有效" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="addUserOk">确定</button>
            </div>
        </div>
    </form>
</div>


<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听登录
        table.on('toolbar(test)', function (data) {
            switch (data.event) {
                case 'insert':
                    //layerIndex:整个弹出层得对象
                    layerIndex = layer.open({
                        type:1,// Page层类型
                        area:['500px','330px'],
                        title:["增加用户","padding-left:5px"], // 标题，及标题样式
                        content:layui.$("#insertUserForm"), // 弹窗id
                        shade:false //是否遮罩
                    });
                    //新增  找到lay-filter为addUserOk的表单
                    form.on("submit(addUserOk)",function (data) {
                        console.log(data.field);//获取表单中的所有内容
                        $.ajax({
                            url:"/insertUser",
                            type:"post",
                            data: data.field,
                            success:function (msg) {
                                console.log(msg);
                                layer.close(layerIndex)//提交之后关闭弹出层
                                table.reload("demo")//刷新表单
                                $("#insertForm")[0].reset();//清空弹窗
                                return false;//关闭表单提交
                            }
                        });
                    })
                    break;
            }
        });
    });
</script>
</body>
</html>
